<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <title>《剑网3》—官方网站—开启3D武侠轻功时代</title>
    <link rel="stylesheet" href="css/剑三官网.css"/>
    <script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script>

</head>
<body>
<header>
    <div class="top">
        <div class="left">
            <a href="#"><img src="img/jx3-logo.png" alt=""/></a>
            <a href="#"><img src="img/ef1d8fbc3a30111d25611ab1f8d09d80.png" alt=""/></a>
        </div>

        <ul id="nav">
            <li class="yanse1">登录</li>
            <li class="yanse1">注册账号</li>
            <li class="yanse1">账号充值</li>
            <li class="yanse">客服</li>
            <li class="yanse">安全</li>
            <li class="yanse">增值服务</li>
        </ul>

        <div class="yincang">
            <ul id="denglu">
                <li>登录
                    <div>
                        <ul id="xiala" style="display: block">
                            <li>注册账号</li>
                            <li>账号充值</li>
                            <li>客服</li>
                            <li>安全</li>
                            <li>增值服务</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</header>
<section class="main">
    <div class="top">
        <img src="img/logo_2.png" alt=""/>
        <ul class="ul1">
            <li><a href="#">首页</a></li>
            <li><a href="#">新闻咨询</a></li>
            <li><a href="#">活动中心</a></li>
            <li><a href="#">资料攻略</a></li>
        </ul>
        <ul class="ul2">
            <li><a href="#">游戏下载</a></li>
            <li><a href="#">游戏特色</a></li>
            <li><a href="#">图赏影音</a></li>
            <li><a href="#">论坛</a></li>
        </ul>
        <div class="qita">
            <ul id="qita">
                <li>其他
                    <div>
                        <ul id="xiala2" style="display: block">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">新闻咨询</a></li>
                            <li><a href="#">活动中心</a></li>
                            <li><a href="#">资料攻略</a></li>
                            <li><a href="#">游戏下载</a></li>
                            <li><a href="#">游戏特色</a></li>
                            <li><a href="#">图赏影音</a></li>
                            <li><a href="#">论坛</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="tupian">
        <div id="imges" class="clear">
            <img src="img/3ff28ceb6cffd680e99e03817fdbbea8.jpg" alt=""/>
            <img src="img/68db797c718579f2beae40e7527e75f1.jpg" alt=""/>
            <img src="img/768fa6751d6e1a34c43f85809866ac9d.jpg" alt=""/>
            <img src="img/5285d56e64d34eb1a5c55577099e4e2f.jpg" alt=""/>
            <img src="img/bd8d79c7e2cfe9ccddea8014a01f82f9.jpg" alt=""/>
            <img src="img/3ff28ceb6cffd680e99e03817fdbbea8.jpg" alt=""/>
        </div>
        <div class="anniu" id="anniu">
            <span class="selected">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <script>
            function seleat(){
                var tupian = document.getElementById('tupian');
                var imges = document.getElementById('imges');
                var spanlist = document.getElementById('anniu').getElementsByTagName('span');
                var time;
                var tupianwidth = tupian.offsetWidth;
                var clickFlag = true;
                var index = 0;


                function clear(){
                    for(var i=0;i<spanlist.length;i++){
                        spanlist[i].className = "";
                    }
                }
               /* debugger;*/
                function yidong(){
                    var start = imges.offsetLeft;
                    var end = index * tupianwidth * (-1);
                    var change = end-start;
                    var timer;
                    var t=0;
                    var maxt = 30;

                    clear();
                    if(index==spanlist.length){
                        spanlist[0].className = "selected";
                    }else{
                        spanlist[index].className="selected";
                    }
                    timer = setInterval(function(){
                        t++;
                        if(t>=maxt){
                            clearInterval(timer);
                            clickFlag = true;
                        }
                        imges.style.left = change/maxt*t+start+"px";
                        if(index==spanlist.length&&t>=maxt){
                            imges.style.left = 0;
                            index=0;
                        }
                    },20);
                }

                time = setInterval(forward,2000);
                function forward(){
                    index++;
                    if(index>spanlist.length){
                        index=0;
                    }
                    yidong();
                }
                imges.onmousemove = function(){
                    clearInterval(time);
                }
                imges.onmouseout = function(){
                    time = setInterval(forward,2000);
                }

                for(var i=0;i<spanlist.length;i++){
                    spanlist[i].onclick = function(){
                        index = this.innerText-1;
                        yidong();
                    }
                }
            }
            seleat();
        </script>
    </div>
    <div class="xiazai">
        <div class="ding"></div>
        <div class="di">
            <a class="left"><p>注册送礼</p></a>
            <a class="right"><p>账号充值</p></a>
        </div>
    </div>
    <div class="jieshao">
        <div class="wenzi">
            <ul>
                <li><span></span><a href="#">一生不容错过的3D武侠扛鼎之作</a></li>
                <li><span></span><a href="#">十二大门派齐聚江湖</a></li>
                <li><span></span><a href="#">武侠轻功</a></li>
                <li><span></span><a href="#">三大玩法</a></li>
                <li><span></span><a href="#">江湖情缘</a></li>
            </ul>
            <p href="#">查看更多></p>
        </div>
    </div>
    <div class="banben">
        <div class="banben_nav">
            <p>版本内容</p>
            <a href="#">更多<span></span></a>
        </div>
        <div class="banben_main">
            <img src="img/chenyue.png" alt=""/>
            <h1>七周年庆典火爆进行中</h1>
        </div>
        <div class="banben_buttom">
            <ul>
                <li><span></span>PVE/PVP全加速</li>
                <li><span></span>活动拿江湖画扇</li>
                <li><span></span>轻功特效披风</li>
                <li><span></span>NPC同款外装</li>
            </ul>
        </div>
    </div>
    <div class="gonggao">
        <iframe src="onclick1.html" style="width: 100%;height: 100%;overflow: hidden;border: none"></iframe>
    </div>
    <div class="shipin">
        <img src="img/gg03.jpg" alt="" style="height:125px;width: 290px "/>
        <img src="img/gg02.jpg" alt="" style="height:125px;width: 290px "/>
    </div>
    <div class="fuwuqi">
        <div class="shanghua">
            <a href="#">推荐服务器</a>
            <ul>
                <li>
                    <span></span>
                    [月卡]电信六区
                    <i class="i_icon">新</i><p>名扬四海</p>
                </li>
                <li>
                    <span></span>
                    [月卡]网通一/二
                    <i class="i_icon">新</i><p>百转千回</p>
                </li>
                <li>
                    <span></span>
                    [点卡]电信八区
                    <i class="i_icon">新</i><p>百家争鸣</p>
                </li>
                <li>
                    <span></span>
                    [点卡]网通三区
                    <i class="i_icon">新</i><p>飞鸢泛月</p>
                </li>
            </ul>
        </div>
        <span><a href="#">数据互联服务器查询 ></a></span>
        <div class="fenge">
            <ul>
                <li><span class="span1"></span><a href="#">新手指南</a></li>
                <li><span class="span2"></span><a href="#">剑侠史记</a></li>
                <li><span class="span3"></span><a href="#">资料站</a></li>
                <li><span class="span4"></span><a href="#">数据库</a></li>
                <li><span class="span5"></span><a href="#">官方微信</a></li>
                <li><span class="span6"></span><a href="#">官方微博</a></li>
            </ul>
        </div>
    </div>
    <div class="menpaijieshao">
        <div class="nav">
            <ul id="shiyi">
                <li style="border-bottom: 2px solid #e86656;color: #e86656;">长歌</li>
                <li>苍云</li>
                <li>丐帮</li>
                <li>纯阳</li>
                <li>藏剑</li>
                <li>少林</li>
                <li>五毒</li>
                <li>天策</li>
                <li>唐门</li>
                <li>七秀</li>
                <li>明教</li>
                <li>万花</li>
            </ul>
            <div class="tp" style="display: block">
                <img src="img/changge.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/cangyun.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/gaibang.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/chunyang.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/cangjian.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/shaolin.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/wudu.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/tiance.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/tangmen.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/qixiu.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/mingjiao.png" alt=""/>
            </div>
            <div class="tp">
                <img src="img/wanhua.png" alt=""/>
            </div>
        </div>
        <script>
            var title = document.getElementById('shiyi').getElementsByTagName('li');
            var body = document.getElementsByClassName('tp');

            for(var i=0;i<title.length;i++){
                title[i].id = i;
                title[i].onclick = function(){
                    tab(this.id);
                }
            }
            function tab(obj) {
                for (var j = 0; j < title.length; j++) {
                    if (obj == j) {
                        title[j].style.borderBottom = '2px solid #e86656';
                        title[j].style.color = '#e86656';
                        body[j].style.display = 'block';
                    } else {
                        title[j].style.borderBottom = '';
                        title[j].style.color = '';
                        body[j].style.display = '';
                    }
                }
            }
        </script>
    </div>
    <div class="menpaishipin">
        <div id="menpaishipin1">
            <div id="imges1" class="clear">
                <img src="img/g1.jpg" alt=""/>
                <img src="img/g2.jpg" alt=""/>
                <img src="img/g1.jpg" alt=""/>
            </div>
            <div class="anniu" id="anniu1">
                <span class="bianse">1</span>
                <span>2</span>
            </div>
            <script>
                var tupian = document.getElementById('menpaishipin1');
                var imges = document.getElementById('imges1');
                var spanlist = document.getElementById('anniu1').getElementsByTagName('span');
                var time;
                var tupianwidth = tupian.offsetWidth;
                var clickFlag = true;
                var index = 0;


                function clear(){
                    for(var i=0;i<spanlist.length;i++){
                        spanlist[i].className = "";
                    }
                }
                /* debugger;*/
                function yidong(){
                    var start = imges.offsetLeft;
                    var end = index * tupianwidth * (-1);
                    var change = end-start;
                    var timer;
                    var t=0;
                    var maxt = 30;

                    clear();
                    if(index==spanlist.length){
                        spanlist[0].className = "bianse";
                    }else{
                        spanlist[index].className="bianse";
                    }
                    timer = setInterval(function(){
                        t++;
                        if(t>=maxt){
                            clearInterval(timer);
                            clickFlag = true;
                        }
                        imges.style.left = change/maxt*t+start+"px";
                        if(index==spanlist.length&&t>=maxt){
                            imges.style.left = 0;
                            index=0;
                        }
                    },20);
                }

                time = setInterval(forward,3000);
                function forward(){
                    index++;
                    if(index>spanlist.length){
                        index=0;
                    }
                    yidong();
                }
                imges.onmousemove = function(){
                    clearInterval(time);
                }
                imges.onmouseout = function(){
                    time = setInterval(forward,3000);
                }

                for(var i=0;i<spanlist.length;i++){
                    spanlist[i].onclick = function(){
                        index = this.innerText-1;
                        yidong();
                    }
                }
            </script>
        </div>
        <div class="cos">
            <ul>
                <li><span class="span1"></span><a href="#">视频</a></li>
                <li><span class="span2"></span><a href="#">音乐</a></li>
                <li><span class="span3"></span><a href="#">cosplay</a></li>
                <li><span class="span4"></span><a href="#">美图</a></li>
                <li><span class="span5"></span><a href="#">周边</a></li>
                <li><span class="span6"></span><a href="#">同人站</a></li>
            </ul>
        </div>
    </div>
    <div class="onclick">
        <div class="click1">
            <ul id="click1">
                <li style="border-bottom: 2px solid #e86656;color: #e86656;">社区推荐</li>
                <li>热门新帖</li>
            </ul>
            <a>更多<span></span></a>
        </div>
        <div class="box" style="display: block">
            <ul>
                <li><span></span>剑网3论坛最受欢迎脸型TOP30</li>
                <li><span></span>官方记者团7月专稿《江湖百态录》</li>
                <li><span></span>【七夕活动】甜蜜来袭，让这个夏天不再是千篇一律！</li>
                <li><span></span>【官方记者团】无量山《竹马情——弈棋小龟》获取攻略</li>
                <li><span></span>【官方记者团】且行且珍惜——至那些初涉江湖的懵懂岁月</li>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li><span></span>【体服·壮志凌云】新任务地图成就TIPS—寇岛</li>
                <li><span></span>【官方记者团】街拍----相约扬州城</li>
                <li><span></span>【官方记者团】本店禁止带宠物入内。【四格第一期】</li>
                <li><span></span>【官方记者团】全区服沙盘总汇</li>
                <li><span></span>【官方记者团】热情洋溢的外观截图党【俏青】教你截图！</li>
            </ul>
        </div>
        <script>
            window.onload = function(){
                var title = document.getElementById('click1').getElementsByTagName('li');
                var body = document.getElementsByClassName('box');

                for(i=0;i<title.length;i++){
                    title[i].id = i;
                    title[i].onclick = function(){
                        tab(this.id);
                    }
                }
                function tab(obj){
                    for(j=0;j<title.length;j++){
                        if(obj==j){
                            title[j].style.borderBottom ='2px solid #e86656';
                            title[j].style.color ='#e86656';
                            body[j].style.display = 'block';
                        }else{
                            title[j].style.borderBottom ='';
                            title[j].style.color ='';
                            body[j].style.display = '';
                        }
                    }
                }
            }
        </script>
    </div>
    <div class="onmove">
        <iframe src="lunbo.html" style="width: 100%;height: 100%;overflow: hidden;border: none"></iframe>
    </div>
    <div class="kefu">
        <iframe src="onclick3.html" style="width: 100%;height: 100%;border: none;overflow: hidden"></iframe>
    </div>
    <div class="zanzhu">
        <iframe src="zanzhu.html" style="width: 100%;height: 100%;border: none;overflow: hidden"></iframe>
    </div>
    <div class="beijing">
        <img src="img/footer.jpg" alt=""/>
    </div>
</section>
<footer class="foot">
    <img src="img/buttom.png" alt=""/>
</footer>
<div id="cebian">
    <img src="img/weichat.gif" alt=""/>
</div>
</body>
</html>